<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>局域网文件传输 - 控制面板</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="app">
        <!-- 顶部栏 -->
        <div class="header">
            <h1>局域网文件传输工具</h1>
            <div class="status">
                <span id="statusText">服务已停止</span>
                <span id="statusDot" class="dot stopped"></span>
            </div>
        </div>

        <!-- 主内容区 -->
        <div class="container">
            <!-- 左侧控制面板 -->
            <div class="panel">
                <h2>服务控制</h2>

                <!-- 服务控制按钮 -->
                <div class="button-group">
                    <button id="startBtn" class="btn btn-primary" onclick="startService()">启动服务</button>
                    <button id="stopBtn" class="btn btn-secondary" onclick="stopService()" disabled>停止服务</button>
                </div>

                <!-- 网络信息 -->
                <div class="section">
                    <h3>网络信息</h3>
                    <div class="info-item">
                        <label>访问地址:</label>
                        <div id="accessUrls" class="access-urls">-</div>
                        <button class="btn btn-small" onclick="copyURL()">复制地址</button>
                    </div>
                    <div class="info-item">
                        <label>端口:</label>
                        <input type="number" id="portInput" value="8888" min="1000" max="65535" onchange="handlePortChange()">
                        <div id="portError" class="error-message" style="display: none; margin-top: 8px; color: #e74c3c; font-size: 12px;"></div>
                    </div>
                </div>

                <!-- 密码设置 -->
                <div class="section">
                    <h3>访问密码</h3>
                    <div class="password-control">
                        <input type="text" id="passwordInput" placeholder="6位数字密码" maxlength="6" readonly>
                        <button id="generateBtn" class="btn btn-small" onclick="generatePassword()">随机生成</button>
                        <button class="btn btn-small" onclick="copyPassword()">复制</button>
                    </div>
                    <div id="passwordError" class="error-message" style="display: none; margin-top: 8px; color: #e74c3c; font-size: 12px;"></div>
                </div>

                <!-- 文件管理 -->
                <div class="section">
                    <h3>文件管理</h3>
                    <div class="button-group">
                        <button class="btn btn-primary" onclick="addFiles()">📄 添加文件</button>
                        <button class="btn btn-primary" onclick="addFolder()">📁 添加文件夹</button>
                        <button class="btn btn-danger" onclick="clearFiles()">清空全部</button>
                        <button class="btn btn-secondary btn-small" onclick="showFilterRules()" title="查看过滤规则">🔍 过滤规则</button>
                    </div>
                    <div class="hint" style="margin-top: 8px; font-size: 12px; color: #999;">
                        自动过滤: .venv, node_modules, .git, __pycache__ 等
                    </div>

                    <div class="file-stats">
                        <div>文件数量: <span id="fileCount">0</span></div>
                        <div>总大小: <span id="totalSize">0 B</span></div>
                    </div>
                </div>
            </div>

            <!-- 右侧文件列表 -->
            <div class="panel flex-grow">
                <h2>共享文件列表</h2>

                <div id="fileList" class="file-list">
                    <div class="empty-state">
                        <p>暂无共享文件</p>
                        <p class="hint">点击"添加文件"或"添加文件夹"开始共享</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部传输日志 -->
        <div class="footer">
            <div class="tabs">
                <button class="tab active" onclick="switchTab('log')">传输日志</button>
                <button class="tab" onclick="switchTab('progress')">传输进度</button>
            </div>

            <div id="logContent" class="log-content">
                <div class="log-list" id="logList">
                    <p class="hint">暂无传输记录</p>
                </div>
            </div>

            <div id="progressContent" class="log-content" style="display:none;">
                <div class="log-list" id="progressList">
                    <p class="hint">暂无正在进行的传输</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 过滤规则弹窗 -->
    <div id="filterModal" class="modal" onclick="closeFilterModal(event)">
        <div class="modal-content" onclick="event.stopPropagation()">
            <div class="modal-header">
                <h2>文件过滤规则</h2>
                <button class="modal-close" onclick="closeFilterModal()">&times;</button>
            </div>
            <div class="modal-body">
                <p class="modal-description">添加文件夹时,以下文件和目录将被自动过滤:</p>

                <div class="filter-section">
                    <h3>📁 排除的目录</h3>
                    <div class="filter-tags">
                        <span class="tag">.venv</span>
                        <span class="tag">venv</span>
                        <span class="tag">env</span>
                        <span class="tag">__pycache__</span>
                        <span class="tag">node_modules</span>
                        <span class="tag">.git</span>
                        <span class="tag">.svn</span>
                        <span class="tag">.idea</span>
                        <span class="tag">.vscode</span>
                        <span class="tag">build</span>
                        <span class="tag">dist</span>
                        <span class="tag">target</span>
                        <span class="tag">.cache</span>
                        <span class="tag">logs</span>
                        <span class="tag">.next</span>
                        <span class="tag">.nuxt</span>
                    </div>
                </div>

                <div class="filter-section">
                    <h3>📄 排除的文件</h3>
                    <div class="filter-tags">
                        <span class="tag">.DS_Store</span>
                        <span class="tag">Thumbs.db</span>
                        <span class="tag">*.pyc</span>
                        <span class="tag">*.log</span>
                        <span class="tag">*.tmp</span>
                        <span class="tag">*.swp</span>
                        <span class="tag">desktop.ini</span>
                    </div>
                </div>

                <div class="filter-section">
                    <h3>🔒 排除规则</h3>
                    <ul class="filter-list">
                        <li>以 <code>.</code> 开头的隐藏文件和目录</li>
                        <li>以 <code>~</code> 开头的备份文件</li>
                        <li>常见的编译输出目录</li>
                        <li>IDE和编辑器配置目录</li>
                        <li>版本控制系统目录</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <script src="app.js"></script>
</body>
</html>
